<template>
  <!-- 是否使用v-model   show就是props = defineProps定义的属性值  rules表单校验规则-->
  <el-dialog  :model-value="show" title="添加角色" width="500">
    <el-form :model="form">
        <!--  prop="username" 要求和username一致，就是必填项 -->
      <el-form-item label="角色名称" prop="roleName">
        <el-input v-model="form.roleName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="描述" prop="description" >
        <el-input v-model="form.description" autocomplete="off" />
      </el-form-item>
      <el-form-item label="菜单" prop="menuIds">
        <el-input v-model="form.menuIds" autocomplete="off"  />
      </el-form-item>

      <el-form-item label="是否启用"  prop="status">
            <el-radio-group v-model="form.status">
                <el-radio :value="0" size="small">启用</el-radio>
                <el-radio :value="1" size="small">禁用</el-radio>
            </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="emit('hide')">取消</el-button>
        <el-button type="primary" @click="submitFrom">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref ,computed} from 'vue'
//导入elm自定义表单校验规则
import { ElMessage, ElMessageBox ,type FormInstance, type FormRules } from 'element-plus'
import { ok } from 'assert';
//导入添加用户的接口
import { addUserApi,getUserByIdApi,updateUserApi } from '../api/index'
import { watch } from 'vue';


const textarea = ref('')

//全局属性 定义一开始的时候弹窗不显示 为false    
//
const props = defineProps({
    show:{   //从父组件传进来一个show   添加所用的数据模型
      type: Boolean,
      default: false
    },
    id:{   //从父组件传进来一个id    编辑用的数据模型
      type: Number,
      default: 0
    },
    name:{   //从父组件传进来一个name    编辑用的数据模型
      type: String,
      default: ''
    },
    description:{   //从父组件传进来一个description    编辑用的数据模型
      type: String,
      default: ''
    },
    // 父组件传递过来一个对象
    data: {
        type: Object,
        default: () => ({})
    }
    
});
//一对象的形式传递参数：传泛型  需要重新写 有问题
// interface IPprop{
//     data:IRoleModel
// }
// defineProps<IPprop>({
//     data:{
        
//     }
// });

//根据有没有id去看是否 查询用户信息
watch(  //由于props是要在组件初始化后才有  setup是在组件初始化之前 所以必须要监听获取id
  ()=> props.id,
  ()=> {
    // 如果id不等于0 说明是编辑用户 需要根据id查询用户信息
    if (props.id !==0){
      // console.log('这里是子组件里面获取传递进来的id'+ props.id);
      getUserByIdApi(props.id).then((res)=>{
        // console.log('这里是获取的res的数据',res);
        if (res.data.code == 200) {
          //form.username = res.data.username
          //合并对象  把右变的对象 合并到左边的form对象中
          Object.assign(form,res.data.data)   //有重复就覆盖
          console.log('这里是修改后准备使用的新数据：',form);
        }
      })
    }
});



// 定义接收父组件传递的参数 然后下面使用 emit('hide') 关闭弹窗 
const emit = defineEmits(['hide'])

// 使用计算属性来创建一个双向绑定的中间值
// 当 props.show 变化时，dialogVisible 会更新
// 当 dialogVisible 被设置时，会触发 emit('update:show')
// const dialogVisible = computed({
//   get: () => props.show,
//   set: (value) => {
//     emit('emit:show', value)
//   }
// })

//表单数据模型
const form = reactive<IRoleListModel>({
  roleName: '',
  description: '',
  resourceIds: '',
  status: 0,
  menuIds: '',
})

//拿到组件
const formRef = ref<FormInstance>();


//定义一个添加用户的函数
const addUser = () => {
    //添加 添加用户确认的弹窗，
  ElMessageBox.confirm('确认要添加角色吗？','添加用户（标题）',{
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
  .then(()=>{
      //提交表单
    addUserApi(form).then((res)=>{
        if (res.code === 200) {
            //提示
            ElMessage.success('添加用户成功！')
            //关闭弹窗  true表示需要刷新数据  在父组件中定义了
            emit('hide',true)
            //刷新数据 父组件已经做到

            //清空表单 elment-plus中form表单的form方法
            formRef.value?.resetFields() 
        }
    })
  })
  .catch(()=>{
    ElMessage.info('取消添加用户！')
  })
    
}

//定义一个编辑用户的函数
const editRole = () => {
  //确认修改的弹窗
  ElMessageBox.confirm('确认要修改用户吗？','修改用户（标题）',{
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
  .then(()=>{   //如果确定修改
    ElMessage.success('修改用户成功！')
    //提交表单
    updateUserApi(form).then((res)=>{
      console.log('这里是获取的res的数据',res);
        if (res.code == 200) {
          //提示 +  隐藏弹窗
          ElMessage.success('修改用户成功！')  
          //清空表单 elment-plus中form表单的form方法
          formRef.value?.resetFields() 
          emit('hide',true)
          
        }
    })
    .catch(()=>{
      ElMessage.info('取消修改用户！')
      emit('hide',false)
    });
    emit('hide',true)
  })
}


const submitFrom = () => {
    //console.log(formRef.value?.validate);
    console.log('这里是提交表单的数据',form);
    //如果id是0 说明是添加用户
    if (props.id === 0) {
      ///如果是添加：
      addUser()
    } else {
      //如果是编辑：
      editRole()
    }
}


</script>
